<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋在线对战游戏</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', '思源黑体', sans-serif;
            background-color: #F8F9FA;
            color: #2C3E50;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 界面切换 */
        .screen {
            display: none;
            min-height: 100vh;
        }
        
        .screen.active {
            display: block;
        }
        
        /* 1. 登录界面样式 */
        .login-screen {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .login-container {
            background: white;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 400px;
        }
        
        .game-title {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            color: #2C3E50;
            margin-bottom: 10px;
        }
        
        .game-subtitle {
            text-align: center;
            font-size: 14px;
            color: #7F8C8D;
            margin-bottom: 30px;
        }
        
        .input-group {
            margin-bottom: 20px;
        }
        
        .input-field {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #ECF0F1;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s;
        }
        
        .input-field:focus {
            outline: none;
            border-color: #2C3E50;
        }
        
        .input-field.error {
            border-color: #E74C3C;
        }
        
        .error-message {
            color: #E74C3C;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }
        
        .btn-primary {
            width: 100%;
            padding: 12px;
            background-color: #E67E22;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .btn-primary:hover {
            background-color: #D35400;
        }
        
        .link-text {
            text-align: center;
            margin-top: 20px;
        }
        
        .link-text a {
            color: #E67E22;
            text-decoration: none;
        }
        
        .link-text a:hover {
            text-decoration: underline;
        }
        
        /* 2. 游戏大厅样式 */
        .lobby-screen {
            background-color: #F8F9FA;
        }
        
        .top-nav {
            background: white;
            padding: 15px 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo-title {
            font-size: 20px;
            font-weight: bold;
            color: #2C3E50;
        }
        
        .user-name {
            font-size: 16px;
            color: #2C3E50;
        }
        
        .logout-btn {
            padding: 8px 16px;
            background-color: #E74C3C;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .lobby-content {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            gap: 20px;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .user-info-panel {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .user-stats {
            text-align: center;
        }
        
        .user-stats h3 {
            margin-bottom: 20px;
            color: #2C3E50;
        }
        
        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
            text-align: center;
        }
        
        .stat-number {
            font-size: 24px;
            font-weight: bold;
            font-family: Arial, sans-serif;
        }
        
        .score-card {
            background: linear-gradient(135deg, #F39C12 0%, #E67E22 100%);
        }
        
        .match-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            padding: 40px;
        }
        
        .match-btn {
            padding: 20px 40px;
            font-size: 20px;
            font-weight: bold;
            background-color: #E67E22;
            color: white;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            margin-bottom: 20px;
            transition: all 0.3s;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(230, 126, 34, 0); }
            100% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0); }
        }
        
        .match-status {
            color: #7F8C8D;
            margin-top: 10px;
            display: none;
        }
        
        .cancel-btn {
            padding: 10px 20px;
            background-color: #E74C3C;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            display: none;
        }
        
        .score-history-panel {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .score-history h3 {
            margin-bottom: 15px;
            color: #2C3E50;
        }
        
        .history-item {
            padding: 10px;
            border-bottom: 1px solid #ECF0F1;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
        }
        
        .history-result.win {
            color: #27AE60;
        }
        
        .history-result.lose {
            color: #E74C3C;
        }
        
        .pagination {
            text-align: center;
            margin-top: 15px;
        }
        
        .pagination button {
            padding: 5px 10px;
            margin: 0 5px;
            border: 1px solid #ECF0F1;
            background: white;
            cursor: pointer;
        }
        
        /* 3. 游戏房间样式 */
        .game-screen {
            background-color: #F8F9FA;
        }
        
        .game-header {
            background: white;
            padding: 15px 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .player-info {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .player-name {
            font-weight: bold;
            color: #2C3E50;
        }
        
        .player-score {
            font-size: 14px;
            color: #7F8C8D;
        }
        
        .turn-indicator {
            font-size: 18px;
            font-weight: bold;
            color: #E67E22;
        }
        
        .game-content {
            display: grid;
            grid-template-columns: 3fr 1fr;
            gap: 20px;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .board-container {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .game-board {
            width: 450px;
            height: 450px;
            background: #D4AF8C;
            border: 3px solid #8B4513;
            position: relative;
            cursor: pointer;
        }
        
        .board-line {
            position: absolute;
            background-color: #8B4513;
        }
        
        .board-line.horizontal {
            width: 100%;
            height: 1px;
        }
        
        .board-line.vertical {
            width: 1px;
            height: 100%;
        }
        
        .chess-piece {
            position: absolute;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }
        
        .chess-piece.black {
            background-color: #000000;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        
        .chess-piece.white {
            background-color: #FFFFFF;
            border: 1px solid #CCCCCC;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .game-controls {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .timer-section {
            margin-bottom: 20px;
        }
        
        .timer {
            background: #ECF0F1;
            padding: 10px;
            border-radius: 5px;
            text-align: center;
            margin: 5px 0;
        }
        
        .surrender-btn {
            width: 100%;
            padding: 12px;
            background-color: #E74C3C;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
        }
        
        /* 4. 游戏结束样式 */
        .game-end-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .game-end-content {
            background: white;
            padding: 40px;
            border-radius: 15px;
            text-align: center;
            max-width: 400px;
            width: 90%;
        }
        
        .result-text {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        
        .result-text.win {
            color: #27AE60;
        }
        
        .result-text.lose {
            color: #E74C3C;
        }
        
        .score-change {
            font-size: 18px;
            margin-bottom: 30px;
        }
        
        .score-change.positive {
            color: #27AE60;
        }
        
        .score-change.negative {
            color: #E74C3C;
        }
        
        .back-to-lobby-btn {
            padding: 12px 30px;
            background-color: #E67E22;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .lobby-content {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .game-content {
                grid-template-columns: 1fr;
            }
            
            .game-board {
                width: 300px;
                height: 300px;
            }
            
            .login-container {
                margin: 20px;
                padding: 30px;
            }
        }
    </style>
</head>
<body>
    <!-- 1. 登录界面 -->
    <div class="screen active" id="login-screen">
        <div class="login-screen">
            <div class="login-container">
                <h1 class="game-title">五子棋在线对战</h1>
                <p class="game-subtitle">简单易懂，快速匹配，公平对战</p>
                
                <form id="login-form">
                    <div class="input-group">
                        <input type="text" class="input-field" id="login-username" placeholder="请输入用户名" required>
                        <div class="error-message" id="login-username-error"></div>
                    </div>
                    
                    <div class="input-group">
                        <input type="password" class="input-field" id="login-password" placeholder="请输入密码" required>
                        <div class="error-message" id="login-password-error"></div>
                    </div>
                    
                    <div class="error-message" id="login-error"></div>
                    
                    <button type="submit" class="btn-primary">登录</button>
                </form>
                
                <div class="link-text">
                    <a href="#" onclick="showScreen('register-screen')">还没有账号？立即注册</a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 2. 注册界面 -->
    <div class="screen" id="register-screen">
        <div class="login-screen">
            <div class="login-container">
                <h1 class="game-title">五子棋在线对战</h1>
                <p class="game-subtitle">加入我们，开始你的五子棋之旅</p>
                
                <form id="register-form">
                    <div class="input-group">
                        <input type="text" class="input-field" id="register-username" placeholder="设置用户名" required>
                        <div class="error-message" id="register-username-error"></div>
                    </div>
                    
                    <div class="input-group">
                        <input type="password" class="input-field" id="register-password" placeholder="设置密码（至少8位，包含字母和数字）" required>
                        <div class="error-message" id="register-password-error"></div>
                    </div>
                    
                    <button type="submit" class="btn-primary">注册</button>
                </form>
                
                <div class="link-text">
                    <a href="#" onclick="showScreen('login-screen')">已有账号？立即登录</a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 3. 游戏大厅界面 -->
    <div class="screen" id="lobby-screen">
        <div class="lobby-screen">
            <div class="top-nav">
                <div class="logo-title">五子棋在线对战</div>
                <div class="user-name">用户：<span id="current-user">testuser</span></div>
                <button class="logout-btn" onclick="showScreen('login-screen')">退出登录</button>
            </div>
            
            <div class="lobby-content">
                <!-- 左侧用户信息面板 -->
                <div class="user-info-panel">
                    <div class="user-stats">
                        <h3 id="user-display-name">testuser</h3>
                        
                        <div class="stat-card">
                            <div>总比赛场数</div>
                            <div class="stat-number" id="total-games">12</div>
                        </div>
                        
                        <div class="stat-card">
                            <div>获胜场数</div>
                            <div class="stat-number" id="win-games">8</div>
                        </div>
                        
                        <div class="stat-card score-card">
                            <div>当前积分</div>
                            <div class="stat-number" id="current-score">25</div>
                        </div>
                    </div>
                </div>
                
                <!-- 中央匹配区域 -->
                <div class="match-area">
                    <button class="match-btn" id="match-btn" onclick="startMatching()">在线匹配</button>
                    <div class="match-status" id="match-status">正在匹配中... 00:15</div>
                    <button class="cancel-btn" id="cancel-btn" onclick="cancelMatching()">取消匹配</button>
                </div>
                
                <!-- 右侧积分流水面板 -->
                <div class="score-history-panel">
                    <div class="score-history">
                        <h3>积分流水详情</h3>
                        
                        <div class="history-item">
                            <div>
                                <div>2小时前 vs player1</div>
                            </div>
                            <div>
                                <span class="history-result win">胜 +5</span>
                            </div>
                        </div>
                        
                        <div class="history-item">
                            <div>
                                <div>5小时前 vs player2</div>
                            </div>
                            <div>
                                <span class="history-result lose">负 -3</span>
                            </div>
                        </div>
                        
                        <div class="history-item">
                            <div>
                                <div>1天前 vs player3</div>
                            </div>
                            <div>
                                <span class="history-result win">胜 +5</span>
                            </div>
                        </div>
                        
                        <div class="pagination">
                            <button>上一页</button>
                            <button>1</button>
                            <button>下一页</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 4. 游戏房间界面 -->
    <div class="screen" id="game-screen">
        <div class="game-screen">
            <div class="game-header">
                <div class="player-info">
                    <div class="player-name">testuser</div>
                    <div class="player-score">积分: 25</div>
                </div>
                
                <div class="turn-indicator" id="turn-indicator">轮到你下棋</div>
                
                <div class="player-info">
                    <div class="player-name">opponent</div>
                    <div class="player-score">积分: 30</div>
                </div>
            </div>
            
            <div class="game-content">
                <div class="board-container">
                    <div class="game-board" id="game-board">
                        <!-- 棋盘线条和棋子将通过JavaScript动态生成 -->
                    </div>
                </div>
                
                <div class="game-controls">
                    <div class="timer-section">
                        <h4>游戏计时器</h4>
                        <div class="timer">
                            <div>我的思考时间</div>
                            <div id="my-timer">05:00</div>
                        </div>
                        <div class="timer">
                            <div>对手思考时间</div>
                            <div id="opponent-timer">04:45</div>
                        </div>
                    </div>
                    
                    <button class="surrender-btn" onclick="surrender()">认输</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 游戏结束模态框 -->
    <div class="game-end-modal" id="game-end-modal">
        <div class="game-end-content">
            <div class="result-text win" id="result-text">你赢了</div>
            <div class="score-change positive" id="score-change">+5积分</div>
            <button class="back-to-lobby-btn" onclick="backToLobby()">返回大厅</button>
        </div>
    </div>
    
    <script>
        // 界面切换功能
        function showScreen(screenId) {
            document.querySelectorAll('.screen').forEach(screen => {
                screen.classList.remove('active');
            });
            document.getElementById(screenId).classList.add('active');
        }
        
        // 登录表单处理
        document.getElementById('login-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const username = document.getElementById('login-username').value;
            const password = document.getElementById('login-password').value;
            
            // 简单验证
            if (username && password) {
                document.getElementById('current-user').textContent = username;
                document.getElementById('user-display-name').textContent = username;
                showScreen('lobby-screen');
            } else {
                document.getElementById('login-error').textContent = '请填写完整信息';
                document.getElementById('login-error').style.display = 'block';
            }
        });
        
        // 注册表单处理
        document.getElementById('register-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const username = document.getElementById('register-username').value;
            const password = document.getElementById('register-password').value;
            
            // 密码验证
            const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
            if (!passwordRegex.test(password)) {
                document.getElementById('register-password-error').textContent = '密码格式不符合要求';
                document.getElementById('register-password-error').style.display = 'block';
                return;
            }
            
            if (username && password) {
                alert('注册成功！');
                showScreen('login-screen');
            }
        });
        
        // 匹配功能
        let matchingTimer;
        let matchingSeconds = 0;
        
        function startMatching() {
            document.getElementById('match-btn').style.display = 'none';
            document.getElementById('match-status').style.display = 'block';
            document.getElementById('cancel-btn').style.display = 'block';
            
            matchingTimer = setInterval(function() {
                matchingSeconds++;
                const minutes = Math.floor(matchingSeconds / 60);
                const seconds = matchingSeconds % 60;
                document.getElementById('match-status').textContent = 
                    `正在匹配中... ${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                
                // 模拟匹配成功
                if (matchingSeconds >= 8) {
                    clearInterval(matchingTimer);
                    showScreen('game-screen');
                    initGame();
                }
            }, 1000);
        }
        
        function cancelMatching() {
            clearInterval(matchingTimer);
            matchingSeconds = 0;
            document.getElementById('match-btn').style.display = 'block';
            document.getElementById('match-status').style.display = 'none';
            document.getElementById('cancel-btn').style.display = 'none';
        }
        
        // 游戏功能
        let gameBoard = [];
        let currentPlayer = 'black';
        let gameActive = true;
        
        function initGame() {
            const board = document.getElementById('game-board');
            board.innerHTML = '';
            
            // 创建15x15棋盘
            gameBoard = Array(15).fill().map(() => Array(15).fill(null));
            
            // 绘制棋盘线条
            for (let i = 0; i < 15; i++) {
                // 水平线
                const hLine = document.createElement('div');
                hLine.className = 'board-line horizontal';
                hLine.style.top = `${(i * 30) + 15}px`;
                board.appendChild(hLine);
                
                // 垂直线
                const vLine = document.createElement('div');
                vLine.className = 'board-line vertical';
                vLine.style.left = `${(i * 30) + 15}px`;
                board.appendChild(vLine);
            }
            
            // 添加点击事件
            board.addEventListener('click', handleBoardClick);
        }
        
        function handleBoardClick(e) {
            if (!gameActive) return;
            
            const rect = e.target.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            const col = Math.round((x - 15) / 30);
            const row = Math.round((y - 15) / 30);
            
            if (col >= 0 && col < 15 && row >= 0 && row < 15 && !gameBoard[row][col]) {
                placePiece(row, col, currentPlayer);
                
                if (checkWin(row, col)) {
                    endGame(currentPlayer === 'black' ? 'win' : 'lose');
                } else {
                    currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
                    updateTurnIndicator();
                    
                    // 模拟对手下棋
                    if (currentPlayer === 'white') {
                        setTimeout(aiMove, 1000);
                    }
                }
            }
        }
        
        function placePiece(row, col, color) {
            gameBoard[row][col] = color;
            
            const piece = document.createElement('div');
            piece.className = `chess-piece ${color}`;
            piece.style.left = `${col * 30 + 15}px`;
            piece.style.top = `${row * 30 + 15}px`;
            
            document.getElementById('game-board').appendChild(piece);
        }
        
        function aiMove() {
            // 简单AI，随机找一个空位
            const emptyCells = [];
            for (let i = 0; i < 15; i++) {
                for (let j = 0; j < 15; j++) {
                    if (!gameBoard[i][j]) {
                        emptyCells.push([i, j]);
                    }
                }
            }
            
            if (emptyCells.length > 0) {
                const [row, col] = emptyCells[Math.floor(Math.random() * emptyCells.length)];
                placePiece(row, col, 'white');
                
                if (checkWin(row, col)) {
                    endGame('lose');
                } else {
                    currentPlayer = 'black';
                    updateTurnIndicator();
                }
            }
        }
        
        function updateTurnIndicator() {
            const indicator = document.getElementById('turn-indicator');
            indicator.textContent = currentPlayer === 'black' ? '轮到你下棋' : '等待对手下棋';
        }
        
        function checkWin(row, col) {
            const color = gameBoard[row][col];
            const directions = [
                [0, 1], [1, 0], [1, 1], [1, -1]
            ];
            
            for (let [dx, dy] of directions) {
                let count = 1;
                
                // 正方向
                for (let i = 1; i < 5; i++) {
                    const newRow = row + dx * i;
                    const newCol = col + dy * i;
                    if (newRow >= 0 && newRow < 15 && newCol >= 0 && newCol < 15 && 
                        gameBoard[newRow][newCol] === color) {
                        count++;
                    } else {
                        break;
                    }
                }
                
                // 反方向
                for (let i = 1; i < 5; i++) {
                    const newRow = row - dx * i;
                    const newCol = col - dy * i;
                    if (newRow >= 0 && newRow < 15 && newCol >= 0 && newCol < 15 && 
                        gameBoard[newRow][newCol] === color) {
                        count++;
                    } else {
                        break;
                    }
                }
                
                if (count >= 5) {
                    return true;
                }
            }
            
            return false;
        }
        
        function endGame(result) {
            gameActive = false;
            const modal = document.getElementById('game-end-modal');
            const resultText = document.getElementById('result-text');
            const scoreChange = document.getElementById('score-change');
            
            if (result === 'win') {
                resultText.textContent = '你赢了';
                resultText.className = 'result-text win';
                scoreChange.textContent = '+5积分';
                scoreChange.className = 'score-change positive';
            } else {
                resultText.textContent = '你输了';
                resultText.className = 'result-text lose';
                scoreChange.textContent = '-3积分';
                scoreChange.className = 'score-change negative';
            }
            
            modal.style.display = 'flex';
        }
        
        function surrender() {
            endGame('lose');
        }
        
        function backToLobby() {
            document.getElementById('game-end-modal').style.display = 'none';
            showScreen('lobby-screen');
            
            // 更新积分显示
            const currentScore = parseInt(document.getElementById('current-score').textContent);
            const scoreChange = document.getElementById('score-change').textContent;
            const newScore = currentScore + (scoreChange.includes('+') ? 5 : -3);
            document.getElementById('current-score').textContent = Math.max(0, newScore);
            
            // 更新比赛统计
            const totalGames = parseInt(document.getElementById('total-games').textContent);
            document.getElementById('total-games').textContent = totalGames + 1;
            
            if (scoreChange.includes('+')) {
                const winGames = parseInt(document.getElementById('win-games').textContent);
                document.getElementById('win-games').textContent = winGames + 1;
            }
        }
        
        // 初始化演示数据
        document.addEventListener('DOMContentLoaded', function() {
            // 可以在这里添加初始化代码
        });
    </script>
</body>
</html> 